<template>
  <span class="headerAvatar">
    <template v-if="picType === 'avatar'">
      <el-avatar
          v-if="userInfo.userImage"
          :size="30"
          :src="avatar"
      />
      <el-avatar
          v-else
          :size="30"
          :src="noAvatar"
      />
    </template>
    <template v-if="picType === 'img'">
      <img
          v-if=" userInfo.userImage"
          :src="avatar"
          class="avatar"
      >
      <img
          v-else
          :src="noAvatar"
          class="avatar"
      >
    </template>
    <template v-if="picType === 'file'">
      <el-image
          :src="file"
          class="file"
          :preview-src-list="previewSrcList"
          :preview-teleported="true"
      />
    </template>
  </span>
</template>

<script setup>
import noAvatarPng from '@/assets/noBody.png'
import {useUserStore} from '@/pinia/modules/user'
import {computed, ref} from 'vue'
import {getUserInfo} from "@/api/user";

defineOptions({
  name: 'CustomPic'
})

const props = defineProps({
  picType: {
    type: String,
    required: false,
    default: 'avatar'
  },
  picSrc: {
    type: String,
    required: false,
    default: ''
  },
  preview: {
    type: Boolean,
    default: false
  }
})

const path = ref(import.meta.env.VITE_BASE_API + '/')
const noAvatar = ref(noAvatarPng)

const userInfo = ref({userImage: ''})

const getInfo = async () => {
  const res = await getUserInfo()
  userInfo.value = res.data
}

const avatar = computed(() => {
  if (props.picSrc === '') {
    if (userInfo.value.userImage !== '' && userInfo.value.userImage.slice(0, 4) === 'http') {
      return userInfo.value.userImage
    }
    return path.value + userInfo.value.userImage
  } else {
    if (props.picSrc !== '' && props.picSrc.slice(0, 4) === 'http') {
      return props.picSrc
    }
    return path.value + props.picSrc
  }
})
const file = computed(() => {
  if (props.picSrc && props.picSrc.slice(0, 4) !== 'http') {
    return path.value + props.picSrc
  }
  return props.picSrc
})
const previewSrcList = computed(() => props.preview ? [file.value] : [])


getInfo()
</script>

<style scoped>
.headerAvatar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}

.file {
  width: 80px;
  height: 80px;
  position: relative;
}
</style>
